<div>
    <Remove :selects="selectedRows" />
    <div class="row">
        <div class="col-12">
            <div class="page-toolbar detail p-0 mb-3">
                <div class="loading-layer" v-if="loading"></div>
                <button type="button" class="btn btn-dark" @click="tableData()" :disabled="loading">
                    <i class="mdi mdi-refresh align-middle"></i>
                </button>
                <b-dropdown variant="dark" class="dropdown-dark" v-if="user.sysadmin_flag">
                    <template v-slot:button-content>
                        <span class="mdi mdi-dots-horizontal align-middle"></span>
                        <span class="ml-2 mr-4">更多操作</span>
                    </template>
                    <b-dropdown-item :disabled="selectedRows.length != 1">
                        <span class="icon mdi mdi-circle-edit-outline"></span>
                        <span class="text">编辑</span>
                    </b-dropdown-item>
                    <b-dropdown-item :disabled="selectedRows.length != 1">
                        <span class="icon mdi mdi-close"></span>
                        <span class="text">删除</span>
                    </b-dropdown-item>
                </b-dropdown>
                <div class="form-group">
                    <select class="form-control custom-select" v-model="searchField" @change="tableData()">
                        <option value="type">类型</option>
                        <option value="tags">Tags</option>
                        <option value="label">Label</option>
                    </select>
                </div>
                <div class="form-group">
                    <input class="form-control" placeholder="搜索" @keydown.13="tableData()" v-model="search" />
                </div>
            </div>
            <a-table
                class="text-norwap"
                :scroll="{ x: true }"
                :columns="table.cols"
                :dataSource="table.rows"
                :pagination="pagination"
                :loading="loading"
                :locale="locale"
                :rowKey="records => records.id"
                :rowSelection="{ onChange: tableOnSelect, selectedRowKeys: selectedRowKeys, }"
                @change="tableChange"
                v-if="Object.keys(repo).length && user.sysadmin_flag"
            >
                <template slot="id" slot-scope="id, row">
                    <router-link :to="{
                        name: 'repos-artifacts-detail',
                        params: {
                            project: $route.params.project,
                            repo: $route.params.repo,
                            artifacts: row.digest,
                        }}"
                    >
                        {{ id }}
                    </router-link>
                </template>
                <template slot="digest" slot-scope="digest">
                    <router-link :to="{
                        name: 'repos-artifacts-detail',
                        params: {
                            project: $route.params.project,
                            repo: $route.params.repo,
                            artifacts: digest,
                        }}"
                    >
                        {{ digest | limitTo(15) }}
                    </router-link>
                </template>
                <template slot="type" slot-scope="type, row">
                    <span class="mdi mdi-content-copy h6 pointer hover-dark"
                        v-if="repo.hasOwnProperty('name')"
                        v-clipboard="'docker pull atomhub.org/' + repo.name + '@' + row.digest"
                    ></span>
                </template>
                <template slot="size" slot-scope="size">
                    <span v-if="size / 1024 / 1024 > 1 && size / 1024 / 1024 < 1024">
                        {{ (size / 1024 / 1024).toFixed(2) }} MB
                    </span>
                    <span v-if="size / 1024 / 1024 < 1">
                        {{ (size / 1024).toFixed(2) }} KB
                    </span>
                    <span v-if="size / 1024 / 1024 >= 1024">
                        {{ (size / 1024 / 1024 / 1024).toFixed(2) }} GB
                    </span>
                </template>
                <template slot="tags" slot-scope="tags">
                    <div class="tagcloud">
                        <a class="mt-0" v-for="(tag, idx) in tags" :key="idx">
                            {{ tag.name }}<span v-if="idx != tags.length - 1"></span>
                        </a>
                    </div>
                </template>
                <template slot="push_time" slot-scope="push_time">
                    <span class="text-muted">{{ push_time | toLocalTime }}</span>
                </template>
            </a-table>
            <a-table
                class="text-norwap"
                :scroll="{ x: true }"
                :columns="table.cols"
                :dataSource="table.rows"
                :pagination="pagination"
                :loading="loading"
                :locale="locale"
                :rowKey="records => records.id"
                @change="tableChange"
                v-if="Object.keys(repo).length && !user.sysadmin_flag"
            >
                <template slot="digest" slot-scope="digest">
                    <span class="text-muted">{{ digest | limitTo(15) }}</span>
                </template>
                <template slot="type" slot-scope="type, row">
                    <span class="mdi mdi-content-copy h6 pointer hover-dark"
                        v-if="repo.hasOwnProperty('name')"
                        v-clipboard="'docker pull atomhub.org/' + repo.name + '@' + row.digest"
                    ></span>
                </template>
                <template slot="size" slot-scope="size">
                    <span v-if="size / 1024 / 1024 > 1 && size / 1024 / 1024 < 1024">
                        {{ (size / 1024 / 1024).toFixed(2) }} MB
                    </span>
                    <span v-if="size / 1024 / 1024 < 1">
                        {{ (size / 1024).toFixed(2) }} KB
                    </span>
                    <span v-if="size / 1024 / 1024 >= 1024">
                        {{ (size / 1024 / 1024 / 1024).toFixed(2) }} GB
                    </span>
                </template>
                <template slot="tags" slot-scope="tags">
                    <div class="tagcloud">
                        <a class="mt-0" v-for="(tag, idx) in tags" :key="idx">
                            {{ tag.name }}<span v-if="idx != tags.length - 1"></span>
                        </a>
                    </div>
                </template>
                <template slot="push_time" slot-scope="push_time">
                    <span class="text-muted">{{ push_time | toLocalTime }}</span>
                </template>
            </a-table>
        </div>
    </div>
</div>
